<template>
  <div id="samplesample">
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-row>
        <el-col span='8'>
          <el-form-item label="备件名称" prop="partName">
            <el-input disabled="disabled" v-model="form.partName" placeholder="请输入" style="width: 260px"></el-input>
          </el-form-item>
        </el-col>
        <el-col span='8'>
          <el-form-item label="单价（元）" prop="price">
            <el-input disabled="disabled" v-model="form.price" placeholder="请输入" style="width: 260px"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col span='8'>
           <el-form-item label="型号" prop="partType">
            <el-input disabled="disabled" v-model="form.partType" placeholder="请输入" style="width: 260px"></el-input>
          </el-form-item>
        </el-col>
        <el-col span='8'>
          <el-form-item label="库存数量" prop="number">
            <el-input disabled="disabled" v-model="form.number" placeholder="请输入" style="width: 260px"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
        <el-col span='8'>
          <el-form-item label="出库数量" prop="outNumber" >
            <el-input v-model="form.outNumber" placeholder="请输入出库数量" style="width: 260px"></el-input>
          </el-form-item>
        </el-col>
      <el-form-item style="margin-top: 20px">
        <el-button type="primary" @click="submitForm('form')">出库</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
// import RichText from '@/components/RichText/RichText'
import { outPart,getPartInfo as getInfo } from "../../api/part";
import { getMap } from "../../utils/dataStorage";
import { resolve, reject } from 'q';
export default {
  data() {
    return {
      tableData: {},
      form: {
        partName: "",
        partType: "",
        price: "",
        number: "",
        alertNumber: "",
        isEffectice: "",
        outNumber: "",
      },
        rules: {
        partName: [
          { required: true, message: "请选择备件名称", trigger: "blur" }
        ],
        partType: [
          { required: true, message: "请选择备件类型", trigger: "blur" }
        ],
        price: [
          { required: true, message: "请选择备件价格", trigger: "blur" }
        ],
        number: [
          { required: true, message: "请输入备件数量", trigger: "blur" }
        ],
        alertNumber: [
          { required: true, message: "请输入警戒数量", trigger: "blur" }
        ],
        isEffectice: [
          { required: true, message: "请输入是否有效", trigger: "blur" }
        ],
      },
      checkedCities: []
    };
  },
  created() {
    this.getPartInfo();
  },
  components: {},
  methods: {
  submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.form.number < this.form.outNumber) {
            alert("对不起，您输入的出库数量大于剩余数量");
            return;
          }
          // 设置提交的参数
          let param = new URLSearchParams();
          let id = getMap("id");
          param.append("id", id);
          param.append("partName", this.form.partName);
          param.append("partType", this.form.partType);
          param.append("price",this.form.price);
          param.append("number",this.form.number);
          param.append("alertNumber",this.form.alertNumber);
          param.append("isEffectice",this.form.isEffectice);
          param.append("outNumber",this.form.outNumber);
          let that = this;
          outPart(param).then(r=>{
            // setMap("id", r);
            this.$router.push({path: '/part_list'});
          }).catch(_=>{
              console.log(r);
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    getPartInfo() {
      let id = getMap("id");
      let param = new URLSearchParams();
      param.append("partId", id);
      let that = this;
      getInfo(param)
        .then(r => {
          console.log(r);
          this.form.partName = r.part.partName;
          this.form.partType = r.part.partType;
          this.form.price = r.part.price;
          this.form.number = r.part.number;
          this.form.alertNumber = r.part.alertNumber;
          this.form.isEffectice = r.part.isEffectice;
          this.form.partStatus = r.part.partStatus;
        })
        .catch(_ => {
          console.log(_);
        });
    }
    
  }
};
</script>